<style lang="less" scoped src="./studentsignup.less"></style>
<script src="./studentsignup.js"></script>

<template>
    <div class="main-div">
        <div class="main-content">
            <div class="table">
                <div class="table-title"><span>学员信息</span></div>
                <div class="table-content">
                    <Row class="table-Row">
                    <Col span="4" class="titele"><span style="color: red">*</span>姓名：</Col>
                    <Col span="8" class="content">
                    <Input v-model="formData.name" :clearable="!isRead" :readonly="isRead" @on-blur="queryStudentByName"></Input>
                    <span @click="studentModal = true"><Button type="primary" size="small" icon="android-search">学员查询</Button></span>
                    <span @click="resetStudent"><Button type="primary" size="small" icon="refresh">重置</Button></span>
                    </Col>
                    <Col span="4" class="titele">性别：</Col>
                    <Col span="8" class="content">
                    <Select v-model="formData.sex" :clearable="!isRead" :disabled="isRead">
                        <Option v-for="item in sexList" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                    </Col>
                </Row>
                    <Row class="table-Row">
                        <Col span="4" class="titele">身份证号：</Col>
                        <Col span="8" class="content">
                        <Input v-model="formData.cardcode" :clearable="!isRead" :readonly="isRead" ></Input>
                        </Col>
                        <Col span="4" class="titele">出生日期：</Col>
                        <Col span="8" class="content">
                        <DatePicker v-model="formData.birthdate" :editable="false" :clearable="!isRead" :readonly="isRead" style="width: 100%"></DatePicker>
                        </Col>
                    </Row>
                    <!--<Row class="table-Row">-->
                        <!--<Col span="4" class="titele">就读年级：</Col>-->
                        <!--<Col span="8" class="content">-->
                        <!--<Select v-model="formData.gradeid" :clearable="!isRead" :disabled="isRead">-->
                            <!--<Option v-for="item in gradeList" :value="item.id" :key="item.id">{{item.name}}</Option>-->
                        <!--</Select>-->
                        <!--</Col>-->
                        <!--<Col span="4" class="titele">就读学校：</Col>-->
                        <!--<Col span="8" class="content">-->
                        <!--<Input v-model="formData.school" :clearable="!isRead" :readonly="isRead"></Input>-->
                        <!--</Col>-->
                    <!--</Row>-->
                    <Row class="table-Row">
                        <Col span="4" class="titele">家长姓名：</Col>
                        <Col span="8" class="content">
                        <Input v-model="formData.parentname" :clearable="!isRead" :readonly="isRead"></Input>
                        </Col>
                        <Col span="4" class="titele"><span style="color: red">*</span>家长手机号：</Col>
                        <Col span="8" class="content">
                        <Input v-model="formData.parentphone" :clearable="!isRead" :readonly="isRead" ></Input>
                        </Col>
                    </Row>
                    <Row class="table-Row">
                        <Col span="4" class="titele">家庭电话：</Col>
                        <Col span="8" class="content">
                        <Input v-model="formData.familyphone" :clearable="!isRead" :readonly="isRead" ></Input>
                        </Col>
                        <Col span="4" class="titele">学员英文名：</Col>
                        <Col span="8" class="content">
                        <Input v-model="formData.ename" :clearable="!isRead" :readonly="isRead" ></Input>
                        </Col>
                    </Row>
                    <Row class="table-Row">
                        <Col span="4" class="titele">点到卡号：</Col>
                        <Col span="8" class="content">
                        <Input v-model="formData.namingcode" :clearable="!isRead" :readonly="isRead" ></Input>
                        </Col>
                        <Col span="4" class="titele">学生卡号：</Col>
                        <Col span="8" class="content">
                        <Input v-model="formData.stundentcode" :clearable="!isRead" :readonly="isRead" ></Input>
                        </Col>
                    </Row>
                    <Row class="table-Row">
                        <Col span="4" class="titele">家庭地址：</Col>
                        <Col span="8" class="content">
                        <Input type="textarea" :rows="2" v-model="formData.familyaddress" :clearable="!isRead" :readonly="isRead"></Input>
                        </Col>
                        <Col span="4" class="titele">备注：</Col>
                        <Col span="8" class="content">
                        <Input type="textarea" :rows="2" v-model="formData.remark" :clearable="!isRead" :readonly="isRead"></Input>
                        </Col>
                    </Row>
                    <Row class="table-Row">
                        <!--<Col span="4" class="titele">是否就餐：</Col>-->
                        <!--<Col span="8" class="content">-->
                        <!--<Select v-model="formData.isEat" clearable>-->
                            <!--<Option v-for="item in selectYesOrNo" :value="item.id" :key="item.id">{{item.name}}</Option>-->
                        <!--</Select>-->
                        <!--</Col>-->
                        <Col span="4" class="titele">缴费有效时间：</Col>
                        <Col span="8" class="content">
                        <DatePicker type="datetime" v-model="formData.chargeValidity" :editable="false" clearable style="width: 100%"></DatePicker>
                        </Col>

                        <Col span="4" class="titele"><span style="color: red">*</span>开课时间：</Col>
                        <Col span="8" class="content">
                            <DatePicker type="date" v-model="formData.classStartTime" :editable="false" clearable style="width: 100%"></DatePicker>
                        </Col>

                    </Row>
                </div>
            </div>
            <div class="table">
                <div class="table-title"><span>班级查询</span></div>
                <div class="query-div">
                    <Row class="query">
                        <Col span="24">
                        班级名称 ：<Input v-model="query.name" clearable style="width: 15%"></Input>
                        学年  ：<Input v-model="query.year" clearable style="width: 10%"></Input>
                        学期 ：
                        <Select v-model="query.classSeason" clearable style="width: 10%">
                            <Option v-for="item in semesterList" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                        专业大类 ：
                        <Select v-model="query.major" clearable style="width: 10%" @on-change="findByParent">
                            <Option v-for="item in LargeMajorList" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                        专业 ：
                        <Select v-model="query.marjorId" clearable style="width: 10%">
                            <Option v-for="item in majorList" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                        部门  ：<Input v-model="query.departmentName"  :readonly="true" style="width: 17%"  @on-click="deptModal = true" icon="search"></Input>
                        </Col>
                    </Row>
                    <Row class="query">
                        <Col span="24">
                        </Col>
                    </Row>
                    <Row class="query">
                        <Col span="24">
                        <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
                        <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
                        </Col>
                    </Row>
                </div>
                <div class="table-content">
                    <Table border :columns="columns" :data="data"></Table>
                </div>
                <div class="pagination">
                    <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                          show-total show-elevator></Page>
                </div>
            </div>
        </div>
        <Modal v-model="studentModal"
               title="学员列表"
               width="80%"
               :styles="{top: '20px'}"
               :mask-closable="false"
               @on-ok="setStudent"
               @on-cancel="studentModal = false">
            <div class="table-content">
                <student-list ref="student"></student-list>
            </div>
        </Modal>
        <Modal v-model="deptModal"
               title="部门列表"
               width="20%"
               :mask-closable="false">
            <custom-tree ref="dept"
                       url="/base/organize/findOrgAll"
                       :formData="{'orgid': baseuser.orgId}"
                       :showCheckbox="false"></custom-tree>
            <div slot="footer">
                <Button type="primary" @click="setDept">确认</Button>
                <Button type="error" style="margin-left: 8px" @click="cancelSelect">清空</Button>
            </div>
        </Modal>
        <Modal v-model="deltailModal"
               title="班级信息"
               @on-cancel="deltailModal = false">
        </Modal>

        <Modal v-model="applyClassTimeVisible"
               title="请选择课次"
               width="500px"
               :mask-closable="false"
               @on-ok="whenSetClassTime"
        >
            <h3 style="color: red;margin-bottom: 20px;" >可以选择课次或者自己填写课次数量</h3>
            <applyclasstime ref="applyclasstime"></applyclasstime>
        </Modal>

        <Modal v-model="feeVisible"
               title="订单详情"
               width="100%"
               :mask-closable="false"
        >
            <orderdetails ref="orderdetails" :billId="billId"></orderdetails>
        </Modal>

    </div>
</template>